<style module>
.editArea {
  width: 100%;
  height: calc(100vh - 160px);
  border: 1px solid gray;
  background-color: ghostwhite;
  grid-area: editArea;
  padding: 6px;
  overflow-x: hidden;
}
.editArea_itemEidtor {
  border: 1px solid gray;
}
.editArea_itemEidtor:hover {
  /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); */
  border-style: dashed;
  border-color: #ced0d3;
  /*border-color: #eee;*/
}
.editArea_itemSelect {
  /*box-shadow: 0 1px 6px rgba(0,0,0,0.2);*/
  border: 1px solid var(--primary-color);
  /* box-shadow: none; */
}
</style>
<template>
  <div
    :class="[
      $style.editArea,
      'root' === compGroup.currentId ? $style.editArea_itemSelect : $style.editArea_itemEidtor,
    ]"
    ref="editArea"
    id="root"
    @click.self="selectContainer"
  >
    <jCtGroup
      v-for="(item, i) in compGroup.compGroupRuntime.getFirstLevel()"
      :key="item.id"
      :debug="true"
      :property="item"
      :compGroup="compGroup"
      :currentModuleId="currentModuleId"
      ref="child"
      @operation="$emit('operation')"
    ></jCtGroup>
  </div>
</template>

<script>
import jCtGroup from "./jCtGroup";
import storeVar from "../mixins/storeVar";
export default {
  name: "jEditArea",
  components: {
    jCtGroup,
  },
  mixins: [storeVar],
  data() {
    return {
      show: true,
    };
  },
  props: {
    currentModuleId: {
      default() {
        return 0
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    /**
     * 设置编辑区的点击事件
     * @param e
     */
    selectContainer(e) {
      this.setElement("root");
    },
  },
};
</script>
